<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>顾客消费</title>
<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${root}/static/js/echarts.min.js"></script>
<script type="text/javascript">
	$(function() {
		var datas = [];
		var url = "${root}/chart/cust";
		$.ajax({
			async : false,
			type : "GET",
			url : url,
			success : function(res) {
				if (res.code == "500") {
					alert(res.message);
					$("#app").hide();
				} else {
					datas.length = 0; //清空数组
					for (var i = 0; i < res.name.length; i++) {
						var item = {
							name : res.name[i],
							value : res.value[i],
						};
						datas.push(item);
					}
				}
			}
		});
		var myChart = echarts.init(document.getElementById("app"));
		//绘制参数设置 标题 数据等等
		var option = {
			//标题
			title : {
				text : "客户信息统计数据"
			},
			//数据
			series : {
				//名称
				name : "身份证号码：租赁次数",
				//类型
				type : "pie",
				//半径
				radius : "60%",
				//数据
				data : datas
			},
			tooltip : {
				show : true
			}
		};
		//加载参数设置 形成绘制
		myChart.setOption(option);
	});
</script>
</head>
<body>
	<div id="app" class="container-fluid"
		style="width: 600px; height: 500px; border: solid 1px #ccc;"></div>
</body>
</html>